<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>todolist</title>
		<style type="text/css">
			.list_con {
				width: 600px;
				margin: 50px auto 0;
			}
			
			.inputtxt {
				width: 550px;
				height: 30px;
				border: 1px solid #ccc;
				padding: 0px;
				text-indent: 10px;
			}
			
			.inputbtn {
				width: 40px;
				height: 32px;
				padding: 0px;
				border: 1px solid #ccc;
			}
			
			.list {
				margin: 0;
				padding: 0;
				list-style: none;
				margin-top: 20px;
			}
			
			.list li {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
			}
			
			.list li span {
				float: left;
			}
			
			.list li a {
				float: right;
				text-decoration: none;
				margin: 0 10px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>

	<body>

		<div class="list_con" id="app">
			<h2>To do list</h2>
			<input type="text" name="" id="txt1" class="inputtxt" v-model="txt">
			<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="fnAdd">

			<ul id="list" class="list">

				<li v-for="(item,index)  in content">
					<span>{{ item }}  </span>
					<a href="javascript:;" class="up" @click="fnUp(index)"> ↑ </a>
					<a href="javascript:;" class="down" @click="fnDown(index)"> ↓ </a>
					<a href="javascript:;" class="del" @click="fnDel(index)">删除</a>
				</li>
				<!--<li><span>学习css</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
				<li><span>学习javascript</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>-->

			</ul>

		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				content:['学习html','学习css','学习javascript'],
				txt:''
			},
			methods:{
				// 增加
				fnAdd:function(){
					this.content.push(this.txt)
					// 清空文本框的数据
					this.txt = ''
					document.getElementById("txt1").focus()
				},
				// 删除
				fnDel:function(index){
					// 第一个参数表示从什么什么位置开始
					// 第二个参数表示删除几个元素
					this.content.splice(index, 1)
				},
				// 上移
				fnUp:function(index){
					if (index == 0) {
						alert('亲，已经到顶了，不要了')
						return
					}
//					alert(index)
					// 不考虑删除
					this.content.splice(index-1,0,this.content[index])
					// 考虑删除
					this.content.splice(index + 1 ,1)
				},
				fnDown:function(index){
					
					this.content.splice(index + 2 ,0,this.content[index])
					this.content.splice(index,1)
					
				}
			}
			
			
			
		})
	</script>

</html>